<template>
	<view class="uesrLayout pageBg" v-if="UserInfo">
		
		<view :style="{height: getNavBarHeight()+'px'}"></view>
		
		<view class="userInfo">
			<view class="pic">
				<image src="/static/images/1.jpg" mode="aspectFill"></image>
			</view>
			<view class="ip">{{UserInfo.IP}}</view>
			<view class="address">来自于：{{UserInfo.address.province}}-{{UserInfo.address.city}}</view>
		</view>
		
		
		<view class="section">
			<view class="list">
				<view class="row" v-for="(item,index) in row1" :key="index"  @click="item.id ===  1  ? down() : (item.id === 2 ? pf():clickContact())">
					<view class="left">
						<uni-icons :type=item.type size="20" color="#28b389"></uni-icons>
						<view class="text">{{item.name}}</view>
					</view>
					<view class="right">
						<view class="text">{{UserInfo.downloadSize}}</view>
						<uni-icons type="right" size="15" color="#aaa" ></uni-icons>
					</view>
					<!-- #ifdef MP -->  
					<button v-if="item.id===3" open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button v-if="item.id===3" @click="clickContact()">拨打电话</button>
					<!-- #endif -->			
				</view>
			</view>
		</view>	
		<view class="section">
			<view class="list">
				<view class="row" v-for="(item,index) in row2" :key="index" @click="item.id === 6 ? sss() :(item.id === 7 ? zzz() : sss())">
					<view class="left">
						<uni-icons :type="item.type" size="20" color="#28b389"></uni-icons>
						<view class="text">{{item.name}}</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa" ></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="loadingLayout" v-else>
		<view :style="{height: getNavBarHeight()+'px'}"></view>
		<uni-load-more status="loading"></uni-load-more>
	</view>
</template>

<script setup> 
import { ref } from 'vue'
import { getNavBarHeight } from "@/utils/system.js"
import { apiUserInfo } from "@/api/apis.js"
const row1=([
	{id: 1, type:"download-filled", name: "我的下载", num:""},
	{id: 2, type:"star-filled", name: "我的评分", num:"560"},
	{id: 3, type:"chatboxes-filled", name: "联系客服", num:""},
])
const row2=([
	{id: 4, type:"notification-filled", name: "订阅更新", num:""},
	{id: 5, type:"flag-filled", name: "常见问题", num:""},
	{id: 6, type:"vip-filled", name: "好看的图片", num:""},
	{id: 7, type:"vip-filled", name: "好看的视频", num:""},
])
function clickContact(){
	uni.makePhoneCall({
		phoneNumber: "16532562989"
	})
}	
function sss(){
	uni.navigateTo({
		url: '/pages/bizhi/bizhi'
	})
}
function zzz(){
	uni.navigateTo({
		url:'/pages/bizhi/shiping'
	})
}
const down = ()=>{
	uni.navigateTo({
		url:'/pages/classlist/classlist?name=我的下载'
	})
}

const UserInfo = ref()
//获取用户信息
const getUserInfo =  async()=>{
	let res = await apiUserInfo();
	console.log(res)
	UserInfo.value = res.data;
}

getUserInfo();
</script>

<style lang="scss" scoped>
.uesrLayout{
	.userInfo{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column; //换轴，竖着显示
		padding: 50rpx 0;
		.pic{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.ip{
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
		.address{
			font-size: 28rpx;
			color: #aaa;
		}
		
	}
	.section{
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0,0,0,0.05);
		.list{
			.row{
				display: flex;
				justify-content: space-between; //两端对齐
				border-bottom: 1rpx solid #eee;
				padding: 0 30rpx;
				height: 100rpx;
				position: relative;
				
				background-color: #fff;
				&:last-child{border-bottom: 0;}
				.left{		
					display: flex;
					align-items: center;
					.text{
						padding-left: 20rpx;
						color: #666;
					}
				}					
				.right{
					display: flex;
					align-items: center;
					.text{
						font-size: 28rpx;
						color: #aaa;
					}
				}
				button{
					position: absolute;
					left: 0;
					top: 0;
					height: 100rpx;
					width: 100%;
					opacity: 0;
				}
			}
		}
	}
}	       
</style>
